<template>
	<view>

		<uni-nav-bar :fixed="true"  title="岛上有家书店" statusBar="true"></uni-nav-bar>

		<!-- 首页内容 -->
		<view v-if="curPage=='index'&&isReady">
			<view class="animation-fade">
				<!-- 轮播图 -->
				<mySwiper :swiperList="swiperList"></mySwiper>
			</view>


			<!-- 中间部分 -->
			<view class="margin-top-sm animation-fade">
				<mySearch id="mySearch" @getInput="handleSearch" placeholder="请输入ISBN | 扫码获取ISBN"></mySearch>

				<!-- <view class="flex justify-center animation-scale-up">

					<image class="image" :src="centerImg" mode="aspectFill" style="width: 750rpx;height: 300rpx;"></image>
				</view> -->
			</view>
			

			<!-- 功能模块 -->
			<view class="margin-top-sm animation-fade">
				<gridList @handleGridTap="handleGridTap" :iconList="iconList"></gridList>
			</view>

			<!-- 弹出的买书二维码 -->
			<uni-popup ref="showImg" type="center" maskClick="ture">
				<view>
					<image @click="handlePreview" class="image" src="https://ae01.alicdn.com/kf/H128dca58f1de40d4bd088605f991c8da3.jpg" mode="widthFix" />
					
				</view>	
			</uni-popup>
			
			<!-- 显示循环n吨书 -->
			<view>
				<view class="cu-item shadow bg-white margin-top-sm text-center padding-top-sm">
					<text class=" text-black text-xxl text-gray">2.33吨</text>书
					
				</view>
				<view class="action cu-item bg-white text-center padding-bottom-sm">
					<text class="cuIcon-title text-yellow"></text>
					<text class="text-gray">已在广外循环</text>
				</view>
			</view>
			<!-- 显示节省n吨木材 -->
			<view class="margin-top-sm">
				<view class="cu-item shadow bg-white text-center padding-top-sm">
					<text class=" text-black text-xxl text-gray">5.126吨</text>
					
				</view>
				<view class="action cu-item bg-white text-center padding-bottom-sm">
					<text class="cuIcon-title text-yellow"></text>
					<text class="text-gray">节省木材</text>
				</view>
			</view>
			<!-- 点击租买书弹出的按钮 -->
			<uni-popup ref="showBtn" type="center" maskClick="ture">
				<view class="">
					<button @click="handleBuy" class="cu-btn bg-yellow shadow-blur round lg button-hover text-white margin-right">我要买书</button>
					<button @click="handleRent" class="cu-btn bg-yellow shadow-blur round lg button-hover text-white ">我要租书</button>
				</view>
			</uni-popup>
			
			
			<!-- <view v-show="isReachedBottom" style="height: 150rpx;">
				<text>已经到底了...</text>
			</view> -->


		</view>

		
		
		<!-- "发现"界面内容 -->
		
		<view v-if="curPage=='find'" class="animation-fade">
			<find></find>
		</view>

		<!-- "我的"界面内容 -->
		
		<view v-if="curPage=='my'" class="animation-fade">
			<user></user>
		</view>

		<!-- 底部tabBar -->
	
		<myTabBar  v-if="curPage!=='cart'" @setCurPage="setCurPage" :tabBar="tabBar" :curPage="curPage"></myTabBar>
		
	</view>
</template>

<script>
	import {handleSearch} from '../../request/handleReq.js';
	import {mapState,mapMutations} from 'vuex';
	
	var _self;
	export default {
		computed:mapState(['hasLogin']),
		data() {
			return {
				
				// books:[],
				// book:{
				//     bookName:"",
				//     price:null,
				//     bookImg:"",
				//     isbn:"",
				//     author:"",
				//     press:"",
				//     year:"",
				//     binding:"",
				//     introduction:""
				// },
				// book_index:null,

				//tabBar对象
				tabBar: {
					//页面列表
					list: [{
							page: "index",
							iconPath: 'https://ae01.alicdn.com/kf/Hd98df483f9034b85b1ae34437072101f0.jpg',
							selectedIconPath: 'https://ae01.alicdn.com/kf/H8b298d7928944cea8aa40532479cf755I.jpg',
							text: "首页"
						},
						{
							page: "find",
							iconPath: 'https://s1.ax1x.com/2020/09/11/wtij4U.png',
							selectedIconPath: 'https://s1.ax1x.com/2020/09/11/wtFZCD.png',
							text: "发现"
						},
						{
							page: "cart",
							iconPath: 'https://ae01.alicdn.com/kf/H91a7316897bd412aab4ed011b28e73b2g.jpg',
							selectedIconPath: 'https://ae01.alicdn.com/kf/H80daddd74c73483ea833e03411250c1bF.jpg',
							text: "购物车"
						},
						{
							page: "my",
							iconPath: 'https://ae01.alicdn.com/kf/Hcb469ca8b7134edb82b1bda8d158bf43v.jpg',
							selectedIconPath: 'https://ae01.alicdn.com/kf/H166eb99dbc154c90a065edd93b01284de.jpg	',
							text: "我的"
						}
					],
					//这里用colorUI的样式类
					selectedTextColor: 'text-yellow',
					textColor: 'text-grey'

				},

				centerImg: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3507733165,2984654270&fm=26&gp=0.jpg',

				//功能板块图标列表
				iconList: [{
						url: 'https://ae01.alicdn.com/kf/H42b28109e27c4f3e998d8e3d66f68571c.jpg',
						name: '线下租/买书'
					},
					{
						url: 'https://s1.ax1x.com/2020/09/02/wpAfpT.png',
						name: '线上购书'
					},
					{
						url: 'https://ae01.alicdn.com/kf/Hb0c7c2f1935f407f9d31b1a387aed1bfq.jpg',
						name: '预约卖书'
					},
					{
						url: 'https://s1.ax1x.com/2020/09/02/wpEiNt.png',
						name: '联系客服'
					},
				],

				curPage: "index",
				

				//传给轮播图组件的数组
				swiperList: [{
						id: 0,
						type: 'image',
						url: 'https://ae01.alicdn.com/kf/H3514dc2d2ba64016a33161441ec59b049.jpg'
					},
					{
						id: 1,
						type: 'image',
						url: 'http://i0.hdslb.com/bfs/article/d22bbcc815668a3244e4237c1731b98d8ee370a3.jpg'
					},
					{
						id: 2,
						type: 'image',
						url: 'http://c.hiphotos.baidu.com/zhidao/pic/item/7a899e510fb30f24b82d3497c895d143ac4b03eb.jpg'
					}
				],

				isReady: false,
				
				isReachedBottom:false

			}
		},


		methods: {
			// ...mapMutations(['forceLogin']),
			
			handleRent(){	
				uni.scanCode({
				    onlyFromCamera:true,
				    scanType:['barCode'],
				    success:async (result) => {
						// console.log(result);
						const res = await handleSearch(result.result);
						// console.log(res);
						uni.navigateTo({
							url: '/pages/buyRentCart/buyRentCart?book='+encodeURIComponent(JSON.stringify(res))+'&TabCur=1'
						});
			
				    }
				});		
			},
			handleBuy(){
				// this.$store.state.buyOffLine = true;
					uni.scanCode({
					    onlyFromCamera:true,
					    scanType:['barCode'],
					    success:async (result) => {
							const res = await handleSearch(result.result);
							// console.log(res);
							uni.navigateTo({
								url: '/pages/buyRentCart/buyRentCart?book='+encodeURIComponent(JSON.stringify(res))+'&TabCur=0'
							});
							
					    }
					});
			},
				
			/* 获取输入框内容后发起请求 */
			async handleSearch(e){
				if(e.length>0){
					const res = await handleSearch(e);
						uni.navigateTo({
							url: '/pages/book_details/book_details?book='+encodeURIComponent(JSON.stringify(res))
						});
					
				}else{
					uni.showModal({
						title:'提示',
						content:'输入内容不能为空',
						mask:true,
						showCancel:false
					});
				}
				
				
			},
			
			handlePreview(){
				uni.previewImage({
					urls: new Array("https://ae01.alicdn.com/kf/H128dca58f1de40d4bd088605f991c8da3.jpg")
					
				})
			},
			
			/* 功能模块点击事件 */
			handleGridTap(e) {
				if(this.hasLogin){
					if (e == 0) {
						console.log("线上租书买书");
						_self.$refs['showBtn'].open();
						// _self.$refs['showImg'].open();
					}
					
					if (e == 1) {
						 _self.$refs['showImg'].open();
						
					}
					if(e == 2){
						uni.navigateTo({
							url: "/pages/sale/sale"
						})
						// uni.navigateTo({
						// 	url:"/pages/about/about"
						// })
					}
					if(e == 3){
						uni.navigateTo({
							url: '/pages/contact/contact'
						})
						// uni.navigateTo({
						// 	url:"/pages/about/about"
						// })
					}
				}else{
					uni.navigateTo({
						url:'../login/login',
						// success: () => {
						// 	this.forceLogin(true);
						// }
					})
				}
			
				

			},

			setCurPage(e) {
				// console.log(e);
				if(e == 'cart'){
					if(this.hasLogin){
						uni.navigateTo({
							url:"../buyRentCart/buyRentCart?TabCur=0",
							
						});
						
					}else{
						uni.navigateTo({
							url:'../login/login'
						})
					}
					return;
					
				}
				_self.curPage = e;
				
			}
		},
		
		onReachBottom() {
			_self.isReachedBottom = true;
			
		},

		onReady() {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			setTimeout(function() {
				_self.isReady = true;
				uni.hideLoading();
			}, 1000)
		},

		onLoad(options) {
			_self = this;	
			uni.checkSession({
				success: (res) => {					
					
				},
				fail: (reason) => {
					_self.$store.commit('logout');
				}
			})
			
		}
	}
</script>

<style>
	
</style>